<layout name="layout" />
<ul class="uk-breadcrumb">
    <li><a href="__APP__">Home</a></li>
    <li class="uk-active"><span>All Products</span></li>
</ul>
<div class="uk-grid">
    <div class="uk-width-1-4">
        <ul class="uk-nav">
            <li><a href="__CONTROLLER__/index">All Products</a></li>
            <volist name=":getObjectList('category','cat_type=3')" id="vo">
                <li><a href="__CONTROLLER__/index/product_cat/{$vo.cat_id}">{$vo.cat_name}</a></li>
            </volist>
        </ul>
    </div>
    <div class="uk-width-3-4">
        {$page}
        <table class="uk-table uk-form">
            <volist name="list" id="vo">
                <tr>
                    <td width=200>
                        <a class="uk-thumbnail" href="__CONTROLLER__/details/pid/{$vo.product_id}">
                            <img src="__PUBLIC__/Uploads/{$vo.product_dir}/thumb_{$vo.product_img}" alt="{$vo.product_name}">
                            <div class="uk-thumbnail-caption">{$vo.product_name}</div>
                        </a>
                    </td>
                    <td>{$vo.product_desc}</td>
                    <td width=100>${$vo.product_price}</td>
                    <td width=250>
                        <button type="button" ng-click="addToCart({$vo.product_id},1)" class="uk-button uk-button-primary">Add To Cart</button>
                        <a href="__CONTROLLER__/details/pid/{$vo.product_id}" class="uk-button">View Details</a>
                    </td>
                </tr>
            </volist>
        </table>
        {$page}
    </div>
</div>
